<template>
  <div class="material-container">
    <el-card class="box-card">
      <div class="table-header">
        <div class="search-area">
          <el-select
            v-model="searchCategory"
            placeholder="素材分类"
            clearable
            class="filter-select"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="searchTopic"
            placeholder="素材话题"
            clearable
            class="filter-select"
            multiple
            collapse-tags
          >
            <el-option
              v-for="item in topicOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            v-model="searchKey"
            placeholder="请输入关键字搜索"
            class="search-input"
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" :icon="Plus" @click="handleAdd">新增素材</el-button>
        </div>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#909399',
          height: '44px',
        }"
        :cell-style="{
          height: '44px',
        }"
      >
        <!-- <el-table-column prop="id" label="ID" width="80" align="center" /> -->
        <el-table-column
          prop="name"
          label="素材名称"
          align="center"
          min-width="160"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-link type="primary" @click="handleView(scope.row)" class="ellipsis-text">
              {{ scope.row.name }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="素材分类" align="center" min-width="70">
          <template #default="scope">
            <el-tag size="small" effect="plain">
              {{ getCategoryLabel(scope.row.category) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="素材话题" align="center" min-width="70">
          <template #default="scope">
            <div class="topic-tags">
              <el-tag
                v-for="topic in scope.row.topic"
                :key="topic"
                size="small"
                effect="plain"
                type="success"
                class="topic-tag"
              >
                {{ getTopicLabel(topic) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="source"
          label="素材来源"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span class="ellipsis-text">{{ scope.row.source }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="summary"
          label="素材简介"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span class="ellipsis-text">{{ scope.row.summary }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="link"
          label="素材链接"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-link
              type="primary"
              :href="scope.row.link"
              target="_blank"
              :underline="false"
              class="ellipsis-text"
            >
              {{ scope.row.link }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="isRecommended" label="推荐" width="60" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.isRecommended ? 'success' : 'info'" effect="light">
              {{ scope.row.isRecommended ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isDisplayed" label="显示" width="60" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.isDisplayed ? 'success' : 'danger'" effect="light">
              {{ scope.row.isDisplayed ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="数据统计" width="240" align="center">
                    <template #default="scope">
                        <div class="statistics-container">
                            <div class="statistics-item">
                                <div class="statistics-label">分享</div>
                                <div class="statistics-count">({{ scope.row.shareCount }})</div>
                            </div>
                            <div class="statistics-item">
                                <div class="statistics-label">收藏</div>
                                <div class="statistics-count">({{ scope.row.collectCount }})</div>
                            </div>
                            <div class="statistics-item">
                                <div class="statistics-label">浏览</div>
                                <div class="statistics-count">({{ scope.row.viewCount }})</div>
                            </div>
                        </div>
                    </template>
                </el-table-column> -->
        <el-table-column prop="createdName" label="发布人" width="100" align="center" />
        <el-table-column prop="createdAt" label="创建时间" width="180" align="center" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button size="small" type="success" @click="handleView(scope.row)">查看</el-button>
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </el-card>

    <!-- 添加抽屉组件 -->
    <el-drawer v-model="drawerVisible" title="素材详情" size="50%" :destroy-on-close="true">
      <div class="drawer-content">
        <div class="material-header">
          <div class="material-title">{{ currentRow.name }}</div>
          <div class="material-meta">
            <el-tag size="large" effect="plain" round>{{
              getCategoryLabel(currentRow.category)
            }}</el-tag>
            <div class="topic-tags">
              <el-tag
                v-for="topic in currentRow.topic"
                :key="topic"
                size="large"
                effect="plain"
                type="success"
                round
                class="topic-tag"
              >
                {{ getTopicLabel(topic) }}
              </el-tag>
            </div>
          </div>
        </div>

        <div class="info-card">
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">素材来源</div>
              <div class="info-value">{{ currentRow.source }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">发布人</div>
              <div class="info-value">{{ currentRow.createdName }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">创建时间</div>
              <div class="info-value">{{ currentRow.createdAt }}</div>
            </div>
          </div>

          <div class="link-item">
            <div class="info-label">素材链接</div>
            <el-link type="primary" :href="currentRow.link" target="_blank" class="info-link">
              <el-icon class="link-icon"><Link /></el-icon>
              {{ currentRow.link }}
            </el-link>
          </div>
        </div>

        <!-- <div class="status-card">
                    <div class="status-grid">
                        <div class="status-item">
                            <div class="status-icon" :class="{ 'active': currentRow.isRecommended }">
                                <el-icon><Star /></el-icon>
                            </div>
                            <div class="status-info">
                                <div class="status-label">推荐状态</div>
                                <div class="status-value">{{ currentRow.isRecommended ? '已推荐' : '未推荐' }}</div>
                            </div>
                        </div>
                        <div class="status-item">
                            <div class="status-icon" :class="{ 'active': currentRow.isDisplayed }">
                                <el-icon><View /></el-icon>
                            </div>
                            <div class="status-info">
                                <div class="status-label">显示状态</div>
                                <div class="status-value">{{ currentRow.isDisplayed ? '已显示' : '已隐藏' }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="stats-grid">
                        <div class="stat-item">
                            <el-icon class="stat-icon"><Share /></el-icon>
                            <div class="stat-value">{{ currentRow.shareCount }}</div>
                            <div class="stat-label">分享量</div>
                        </div>
                        <div class="stat-item">
                            <el-icon class="stat-icon"><Star /></el-icon>
                            <div class="stat-value">{{ currentRow.collectCount }}</div>
                            <div class="stat-label">收藏量</div>
                        </div>
                        <div class="stat-item">
                            <el-icon class="stat-icon"><View /></el-icon>
                            <div class="stat-value">{{ currentRow.viewCount }}</div>
                            <div class="stat-label">浏览量</div>
                        </div>
                    </div>
                </div> -->

        <div class="content-card">
          <div class="content-header">
            <div class="content-title">
              <div class="title-bar"></div>
              <span>素材简介</span>
            </div>
          </div>
          <div class="content-body">{{ currentRow.summary }}</div>
        </div>

        <div class="content-card">
          <div class="content-header">
            <div class="content-title">
              <div class="title-bar"></div>
              <span>素材内容</span>
            </div>
          </div>
          <div class="content-body rich-text" v-html="renderHtml(currentRow.content)"></div>
        </div>
      </div>
    </el-drawer>

    <!-- 新增/编辑素材抽屉 -->
    <el-drawer
      v-model="formDrawerVisible"
      :title="isEdit ? '编辑素材' : '新增素材'"
      size="50%"
      :destroy-on-close="true"
    >
      <div class="drawer-content">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="100px"
          class="material-form"
        >
          <div class="form-card">
            <div class="form-header">基本信息</div>
            <div class="form-body">
              <el-form-item label="素材名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入素材名称" />
              </el-form-item>
              <el-form-item label="素材分类" prop="category">
                <el-radio-group v-model="formData.category" class="radio-group">
                  <el-radio
                    v-for="item in categoryOptions"
                    :key="item.value"
                    :label="item.value"
                    border
                  >
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="素材话题" prop="topic">
                <el-checkbox-group v-model="formData.topic" class="checkbox-group">
                  <el-checkbox-button
                    v-for="item in topicOptions"
                    :key="item.value"
                    :label="item.value"
                  >
                    {{ item.label }}
                  </el-checkbox-button>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="素材来源" prop="source">
                <el-input v-model="formData.source" placeholder="请输入素材来源" />
              </el-form-item>
              <el-form-item label="素材链接" prop="link">
                <el-input v-model="formData.link" placeholder="请输入素材链接" />
              </el-form-item>
            </div>
          </div>

          <div class="form-card">
            <div class="form-header">素材内容</div>
            <div class="form-body">
              <el-form-item label="素材简介" prop="summary">
                <el-input
                  v-model="formData.summary"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入素材简介"
                />
              </el-form-item>
              <el-form-item label="素材内容" prop="content">
                <!-- <el-input
                                    v-model="formData.content"
                                    type="textarea"
                                    :rows="8"
                                    placeholder="请输入素材内容"
                                /> -->
                <wang v-model="formData.content" />
              </el-form-item>
            </div>
          </div>

          <div class="form-card">
            <div class="form-header">状态设置</div>
            <div class="form-body">
              <el-form-item label="推荐状态" prop="isRecommended">
                <el-switch
                  v-model="formData.isRecommended"
                  :active-value="true"
                  :inactive-value="false"
                  active-text="推荐"
                  inactive-text="不推荐"
                />
              </el-form-item>
              <el-form-item label="显示状态" prop="isDisplayed">
                <el-switch
                  v-model="formData.isDisplayed"
                  :active-value="true"
                  :inactive-value="false"
                  active-text="显示"
                  inactive-text="隐藏"
                />
              </el-form-item>
            </div>
          </div>
        </el-form>

        <div class="form-footer">
          <el-button @click="formDrawerVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            {{ isEdit ? '保存' : '创建' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Plus, Search, Star, View, Share, Link } from '@element-plus/icons-vue';
import {
  getMaterialInfo,
  deleteMaterialInfo,
  createMaterialInfo,
  updateMaterialInfo,
} from '@/api/zhaokao/material';
import { getDict } from '@/api/zhaokao/zhaokao';
import { ElMessage, ElMessageBox } from 'element-plus';

const tableData = ref([]);
const loading = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const searchKey = ref('');
const searchCategory = ref('');
const searchTopic = ref('');

// 字典数据
const categoryOptions = ref([]);
const topicOptions = ref([]);

// 获取字典数据
const fetchDictData = async () => {
  try {
    // 获取素材分类字典
    const categoryRes = await getDict('materialType');
    if (categoryRes.success) {
      categoryOptions.value =
        categoryRes.data.fullResultList?.map(item => ({
          label: item.name,
          value: item.itemId,
        })) || [];
    }

    // 获取素材话题字典
    const topicRes = await getDict('materialTopic');
    if (topicRes.success) {
      topicOptions.value =
        topicRes.data.fullResultList?.map(item => ({
          label: item.name,
          value: item.itemId,
        })) || [];
    }
  } catch (error) {
    console.error('获取字典数据失败:', error);
  }
};

// 获取分类标签
const getCategoryLabel = value => {
  const option = categoryOptions.value.find(item => item.value === value);
  return option ? option.label : value;
};

// 获取话题标签
const getTopicLabel = value => {
  const option = topicOptions.value.find(item => item.value === value);
  return option ? option.label : value;
};

const fetchData = async () => {
  loading.value = true;
  try {
    const res = await getMaterialInfo({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      searchKey: searchKey.value,
      category: searchCategory.value,
      topic: searchTopic.value,
    });
    tableData.value = res.data.records || [];
    total.value = res.data.total || 0;
  } catch (error) {
    console.error('获取素材列表失败:', error);
  } finally {
    loading.value = false;
  }
};

const handleSizeChange = val => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = val => {
  pageNum.value = val;
  fetchData();
};

const handleSearch = () => {
  pageNum.value = 1;
  fetchData();
};

const handleReset = () => {
  searchKey.value = '';
  searchCategory.value = '';
  searchTopic.value = '';
  pageNum.value = 1;
  fetchData();
};

const handleEdit = row => {
  isEdit.value = true;
  formData.value = {
    id: row.id,
    name: row.name,
    category: row.category,
    topic: row.topic,
    source: row.source,
    link: row.link,
    summary: row.summary,
    content: row.content,
    isRecommended: row.isRecommended,
    isDisplayed: row.isDisplayed,
  };
  formDrawerVisible.value = true;
};

const drawerVisible = ref(false);
const currentRow = ref({});

const handleView = row => {
  currentRow.value = row;
  drawerVisible.value = true;
};

const handleDelete = row => {
  ElMessageBox.confirm('确认删除该素材吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        await deleteMaterialInfo(row.id);
        ElMessage.success('删除成功');
        fetchData();
      } catch (error) {
        console.error('删除失败:', error);
        ElMessage.error('删除失败');
      }
    })
    .catch(() => {});
};

// 处理富文本内容展示
const renderHtml = content => {
  return content ? content.replace(/\n/g, '<br/>') : '';
};

// 表单相关
const formRef = ref(null);
const formDrawerVisible = ref(false);
const isEdit = ref(false);
const submitting = ref(false);

const formData = ref({
  id: undefined,
  name: '',
  category: '',
  topic: [],
  source: '',
  link: '',
  summary: '',
  content: '',
  isRecommended: false,
  isDisplayed: true,
});

const formRules = {
  name: [{ required: true, message: '请输入素材名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择素材分类', trigger: 'change' }],
  topic: [{ required: true, message: '请选择素材话题', trigger: 'change' }],
  // source: [{ required: true, message: '请输入素材来源', trigger: 'blur' }],
  // link: [{ required: true, message: '请输入素材链接', trigger: 'blur' }],
  summary: [{ required: true, message: '请输入素材简介', trigger: 'blur' }],
  content: [{ required: true, message: '请输入素材内容', trigger: 'blur' }],
};

const resetForm = () => {
  formData.value = {
    id: undefined,
    name: '',
    category: '',
    topic: [],
    source: '',
    link: '',
    summary: '',
    content: '',
    isRecommended: false,
    isDisplayed: true,
  };
};

const handleAdd = () => {
  isEdit.value = false;
  resetForm();
  formDrawerVisible.value = true;
};

const handleSubmit = async () => {
  if (!formRef.value) return;

  await formRef.value.validate(async valid => {
    if (valid) {
      submitting.value = true;
      try {
        const submitData = { ...formData.value };
        // 统一使用 createMaterialInfo 接口
        await createMaterialInfo(submitData);
        ElMessage.success(isEdit.value ? '保存成功' : '创建成功');
        formDrawerVisible.value = false;
        fetchData();
      } catch (error) {
        console.error('提交失败:', error);
        ElMessage.error('提交失败');
      } finally {
        submitting.value = false;
      }
    }
  });
};

onMounted(() => {
  fetchDictData();
  fetchData();
});
</script>

<style scoped>
.material-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.box-card {
  margin-bottom: 20px;
}

.table-header {
  margin-bottom: 20px;
}

.search-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-input {
  width: 240px;
}

.filter-select {
  width: 130px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}

.statistics-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  color: #606266;
  font-size: 13px;
}

.statistics-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.statistics-label {
  color: #606266;
}

.statistics-count {
  /* color: #409EFF; */
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-tag--small) {
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
}

:deep(.el-button--small) {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 4px;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}

:deep(.el-table) {
  border-radius: 4px;
  overflow: hidden;
}

:deep(.el-table th.el-table__cell) {
  font-weight: 400;
}

:deep(.el-table--border .el-table__cell) {
  border-right: 1px solid #ebeef5;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background: #fafafa;
}

.ellipsis-text {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:deep(.el-table .cell) {
  padding: 0 8px;
}

:deep(.el-table--border .el-table__cell) {
  padding: 6px 0;
}

:deep(.el-link) {
  display: block;
  max-width: 100%;
  text-align: center;
}

:deep(.el-link .el-link__inner) {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:deep(.el-link:hover) {
  color: #66b1ff;
}

.drawer-content {
  padding: 24px;
  background-color: #f6f8fa;
  min-height: 100%;
}

.material-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.material-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
}

.material-meta {
  display: flex;
  gap: 12px;
}

.info-card,
.status-card,
.content-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.info-item {
  min-width: 0;
}

.info-label {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}

.info-value {
  font-size: 14px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-item {
  padding-top: 16px;
  border-top: 1px dashed #e4e7ed;
}

.info-link {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;

  :deep(.el-link__inner) {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.link-icon {
  flex-shrink: 0;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

.status-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 20px;
  transition: all 0.3s ease;

  &.active {
    background-color: #3b82f6;
    color: #ffffff;
  }
}

.status-info {
  flex: 1;
  min-width: 0;
}

.status-label {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

.status-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  padding: 16px;
  text-align: center;
  background: #f9fafb;
  border-radius: 8px;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

.stat-icon {
  font-size: 24px;
  color: #3b82f6;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: #6b7280;
}

.content-header {
  margin-bottom: 16px;
}

.content-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
}

.title-bar {
  width: 4px;
  height: 16px;
  background-color: #3b82f6;
  border-radius: 2px;
}

.content-body {
  color: #4b5563;
  line-height: 1.8;
  font-size: 14px;
}

.rich-text {
  :deep(p) {
    margin: 16px 0;
  }

  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
  }

  :deep(h1),
  :deep(h2),
  :deep(h3),
  :deep(h4),
  :deep(h5),
  :deep(h6) {
    margin: 24px 0 16px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
  }

  :deep(blockquote) {
    margin: 16px 0;
    padding: 16px 24px;
    background-color: #f9fafb;
    border-left: 4px solid #3b82f6;
    color: #4b5563;
  }

  :deep(pre) {
    margin: 16px 0;
    padding: 16px;
    background-color: #1f2937;
    border-radius: 8px;
    overflow-x: auto;

    code {
      color: #e5e7eb;
      font-size: 13px;
      line-height: 1.6;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }
  }

  :deep(code):not(pre code) {
    padding: 2px 6px;
    background-color: #f3f4f6;
    border-radius: 4px;
    font-size: 13px;
    color: #ef4444;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;

    th,
    td {
      padding: 12px;
      border: 1px solid #e5e7eb;
    }

    th {
      background-color: #f9fafb;
      font-weight: 500;
      color: #4b5563;
    }

    tr:hover td {
      background-color: #f9fafb;
    }
  }

  :deep(ul),
  :deep(ol) {
    padding-left: 24px;
    margin: 16px 0;

    li {
      margin: 8px 0;
      color: #4b5563;
    }
  }

  :deep(a) {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.3s ease;

    &:hover {
      color: #60a5fa;
      text-decoration: underline;
    }
  }
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;

  .el-drawer__title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
  }
}

:deep(.el-drawer__body) {
  padding: 0;
  overflow-y: auto;
}

.material-form {
  height: calc(100vh - 180px);
  overflow-y: auto;
  padding: 0 20px;
}

.form-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.form-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
}

.form-body {
  padding: 20px;
}

.form-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-form-item__label) {
  font-weight: 400;
  color: #4b5563;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

:deep(.el-input__wrapper:hover),
:deep(.el-textarea__inner:hover) {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.full-width {
  width: 100%;
}

:deep(.el-switch__label) {
  font-size: 13px;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

:deep(.el-radio) {
  margin-right: 0;
  margin-bottom: 0;
}

:deep(.el-radio--bordered) {
  padding: 8px 16px;
  border-radius: 4px;
  border-color: #e5e7eb;
  height: auto;
}

:deep(.el-radio--bordered.is-checked) {
  border-color: #409eff;
}

:deep(.el-radio__label) {
  font-size: 14px;
  padding-left: 6px;
  color: #4b5563;
}

:deep(.el-radio.is-checked .el-radio__label) {
  color: #409eff;
}

:deep(.el-radio__inner) {
  width: 14px;
  height: 14px;
}

:deep(.el-radio__inner::after) {
  width: 6px;
  height: 6px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:deep(.el-checkbox-button__inner) {
  padding: 8px 16px;
  border-radius: 4px;
  border-color: #e5e7eb;
  height: auto;
  font-size: 14px;
  color: #4b5563;
}

:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
  background-color: #409eff;
  border-color: #409eff;
  color: #ffffff;
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.topic-tag {
  margin: 2px;
}
</style>
